<template>
    <div v-show="showDialog1">
        <!--    添加框    -->
        <el-dialog title="书籍修改"  :visible.sync="showDialog1" @close="handleClose" ref="BookRef">
            <el-form :model="form">
                <el-form-item label="书籍编号" :label-width="formLabelWidth">
                    <el-input v-model="form.bid" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="书籍名称" :label-width="formLabelWidth">
                    <el-input v-model="form.bname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图书数量" :label-width="formLabelWidth">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="图书室名称" :label-width="formLabelWidth">
                    <el-select v-model="form.value1" clearable placeholder="请选择书室" @focus="selectChange()">
                        <el-option
                                v-for="item in form.options"
                                :key="item.rid"
                                :label="item.name"
                                :value="item.rid+'-'+item.name">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.adress }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图书类型" :label-width="formLabelWidth">
                    <el-select v-model="form.value2" clearable placeholder="请选择图书类型" @focus="selectChange()">
                        <el-option
                                v-for="item in form.datas"
                                :key="item.tid"
                                :label="item.btype"
                                :value="item.tid+'-'+item.btype">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog1 = false">取 消</el-button>
                <el-button type="primary" @click="update">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Utils from "../assets/js/Utils";
    export default {
        inject:['reload'],
        //子组件接受父组件传递的内容
        props: {
            addOrUpdateVisible1: {
                type: Boolean,
                default: false
            },
            edtId:{
                type:Number,
            }
        },
        data(){
            return {
                form: {
                    bid:'',
                    bname:'',
                    author:'',
                    btdid:'',
                    roomid:'',
                    options: [],
                    datas:[],
                    value1: '',
                    value2: '',
                    num:''
                },
                showDialog1: false,
                formLabelWidth: '100px'
            }
        },
        methods: {
            // 弹出框关闭后触发
            handleClose () {
                // 子组件调用父组件方法，并传递参数
                this.form.bid='';
                this.form.bname='';
                this.form.author='';
                this.form.num='';
                this.form.value1 = null;
                this.form.value2=null;
                this.$emit('change', 'false')
            },
           //根据图书id获取图书的基本信息
            async  getbooks(id){
                const{data:res}=await this.$http.get("book/findbyId",{params:{bid:id}});
                this.form.bid=res.data.book.bid;
                this.form.bname=res.data.book.name;
                this.form.author=res.data.book.author;
                this.form.num=res.data.book.num;
            },
            //根据id获取所有图书书室名称
            async  getList(id){
                const{data:res}=await this.$http.get("library/getRoomNameById",{
                    params:{
                        id:id
                    }
                });
                this.form.value1=res.data.lib.name;
            },
            //根据id获取所有图书的类型
            async  getType(id){
                const{data:res}=await this.$http.get("booktype/getBookTypeById",{
                    params:{
                        id:id
                    }
                });
                this.form.value2=res.data.type.btype;
            },


            //下拉框聚焦时
           async selectChange(){
                // 获取所有图书书室名称
               const{data:res}=await this.$http.post("library/getRoomName");
               this.form.options=res.data.list;
               //获取所有图书书室名称
               const{data:ress}=await this.$http.post("/booktype/getType");
               this.form.datas=ress.data.list;
            },
            //更新图书的信息
            async update(){
                //更新图书的基本信息
                const{data:res}=await this.$http.post("book/update",
                    {
                        author:this.form.author,
                        bid:this.form.bid,
                        bname:this.form.bname,
                        num:this.form.num,
                    });
                if(res.code===20000){
                    //修改图书书室的名称
                    const{data:res1}=await this.$http.post("book/updatebyId",
                        {
                            value1:this.form.value1,
                            bid:this.form.bid,
                        });
                    if(res1.code==20000){
                        //修改图书类型的名称
                        const{data:res2}=await this.$http.post("book/updatetype",
                            {
                                value2:this.form.value2,
                                bid:this.form.bid,
                            });
                        if(res2.code==20000){
                            this.$message.success("更新成功");
                            this.reload();
                        }
                    }
                }



                this.showDialog1 = false;
            }
        },
        watch: {
            // 监听 addOrUpdateVisible 改变
            addOrUpdateVisible1 () {
                this.showDialog1 = this.addOrUpdateVisible1
            }
        }

    }
</script>

<style scoped>

</style>
